<template>
	<!-- 发布文章 -->
	<view>
		<view class="article_top">
			<input v-model="newsform.title" type="text" maxlength="15" class="article_tltle" placeholder="添加话题标题,最多20个字" />
		</view>
		
			<xiaEditor value="" placeholder="" @editorChange="getHtml"></xiaEditor>
	
		<view class="add_cover_view">
			<view class="thumbnail_view" v-if="newsform.picurl">
				<image class="imgthumb" :src="photo_cdn+newsform.picurl" mode=""></image>
			</view>
			<view v-else class="add_cover" @tap="uploadimg">
				<image class="cover_img" :src="photo_cdn+'/zpupload/static/img/camera.png'"></image>
				<view class="cover_title">添加封面</view>
			</view>
		</view>
		
		<view class="submit_send" @tap="submitfun">
			<view class="sendbtnss">发布</view>
		</view>
		
	</view>

</template>

<script>
	import xiaEditor from '@/components/xia-editor/xia-editor.vue'
	import {bbsAddContentInfo} from "@/utils/api/bbs.js";
	import config from "@/utils/config.js";
	let {uploadFile,photo_cdn} = config.baseUrl;
	export default {
		components: {
			xiaEditor
		},
		data() {
			return {
				isAgree:false,
				photo_cdn,
				newsform:{
					title:"",
					picurl:"",
					content:"",
					fid:null
				}
			}
		},
		onLoad(option) {
			console.log(option.id);
			this.newsform.fid = option.id
		},
		methods: {
			//用户协议
			totreaty(){
				uni.navigateTo({
					url:"/pages/mine/agreement/agreementuser"
				})
			},
			//单选框
			radioChange(e){
				this.isAgree = !this.isAgree;
			},
			//得到的富文本 change
			getHtml(e){
				console.info(e);
				this.newsform.content = e;
			},
			//上传图片
			uploadimg(){
				
				uni.chooseImage({
					count:1,
					sourceType:['album','camera'],//album 从相册选图，camera 使用相机
					success: (e) => {
						uni.uploadFile({
						    url: uploadFile, 
						    filePath: e.tempFilePaths[0],
						    name: 'file',
							header:{
								'token':uni.getStorageSync("token"),
							},
						    formData: {
						       "Content-Type": "multipart/form-data",
						       water: 0
						    },
						    success: (res) => {
								let {data} = JSON.parse(res.data)
								console.log('多选',data);
								// data.url
								this.newsform.picurl = data.url;
								
						    },
							fail: (err) => {
								this.$api.msg("上传图片失败");
							}
						});
					}
				});
			},
			submitfun(){				
				let {newsform} = this;
				if(!newsform.title){
					this.$api.msg("请输入话题标题!");
					return false;
				}
				
				if(!newsform.content){
					this.$api.msg("请输入话题介绍内容！");
					return false;
				}
				if(!newsform.picurl){
					this.$api.msg("请输入上传封面图!");
					return false;
				}
				bbsAddContentInfo({
					...newsform,
				}).then((res)=>{
					console.info("res",res);
					if(res.code==1){
						this.$api.msg("提交成功!");
						setTimeout(()=>{
							uni.navigateBack();
						},1500)
					}else{
						this.$api.msg(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.lable_textarea_tag{
		width: 100%;
		padding: 30rpx;
		height: 320rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		box-sizing:border-box;
	}
	.article_top{
		padding: 0rpx 40rpx;
		margin-top: 50rpx;
		margin-bottom: 30rpx;
		.article_tltle{
			padding: 23rpx;
			background-color: #F6F6F6;
			color: #B3B3B3;
			border-radius: 10rpx;
			font-size: 34rpx;
		}
	}
	.add_cover_view{
		.thumbnail_view{
			width: 188rpx;
			height: 188rpx;
			border: 2rpx solid #CCCCCC;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 40rpx;
			.imgthumb{
				width: 188rpx;
				height: 188rpx;
			}
		}
	}
	
	.add_cover{
		width: 188rpx;
		height: 188rpx;
		border: 2rpx solid #CCCCCC;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 40rpx;
		.cover_img{
			width: 34rpx;
			height: 30rpx;
		}
		.cover_title{
			font-size: 30rpx;
			color: #666666;
			margin-top: 20rpx;
		}
	}
	
	.submit_send{
		margin-top: 20rpx;
		.sendbtnss{
			margin: 0 auto;
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: $themecolor;
			border-radius: 14rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
	
	
	.accordtag{
		padding: 0 20rpx;
	}
	.radioview{
		display: block; //转换为块状元素
		margin-top: 38rpx; //
	}
	.atag{
		text-decoration:none; //去下划线
		color: blue;
		size: 28rpx;
	}
	.clonepushbtn{
		text-align: center;
		margin-top: 10upx;
	}
</style>